<template>
	<div class="cupboard-container">
		<!-- 引用头部组件 -->
		<ShopHeader :isInput="dataArr.isInput" 
			:iconArr="dataArr.iconArr" 
			:placeholder="dataArr.placeholder"
			:aimUrl="dataArr.aimUrl"
			:rightUrl="dataArr.rightUrl"
		/>
		<div class="top-zhanwei"></div>
		<div class="category-nav">
			<span class="nav-select selected">销量优先</span>
			<span class="nav-select">价格高低</span>
			<span class="nav-select">综合排序</span>
		</div>
		<div class="cupboard-wrap">
			<div class="cupboard-item" v-for="(item,index) in cupboardArr" :key="index">
				<img :src="item.imgUrl" alt="">
				<p class="cupboard-item-title">
					{{item.title}}
				</p>
				<p class="descript-item">
					{{item.descript}}
				</p>
				<p class="cupboard-price">
					<i class="iconfont icon-renminbi"></i>
					<span>{{item.price}}</span>
				</p>
			</div>
		</div>
	</div>
</template>
<script>
	import ShopHeader from "../../../components/shopheader"
	import  "../../../assets/iconfont/iconfont.css"
	export default{
		name:'cupboard',
		data(){
			return{
				cupboardArr:[
					{
						imgUrl:require("../../../assets/images/shopping/chuwu1.png"),
						title:'美式吊灯',
						descript:"百纯家具 布艺沙发 可拆洗 组合沙发",
						price:1099
					},
					{
						imgUrl:require("../../../assets/images/shopping/chuwu2.png"),
						title:'双人床',
						descript:"百纯家具 布艺沙发 可拆洗 组合沙发",
						price:1299
					},
					{
						imgUrl:require("../../../assets/images/shopping/chuwu3.png"),
						title:'百纯家具',
						descript:"百纯家具 布艺沙发 可拆洗 组合沙发",
						price:2299
					},
					{
						imgUrl:require("../../../assets/images/shopping/chuwu4.png"),
						title:'真皮双人床',
						descript:"百纯家具 布艺沙发 可拆洗 组合沙发",
						price:3299
					}
				],
				dataArr:{
					isInput:false,
					iconArr:[
						{
							iconLeft:"icon-zuojiantou",
							iconRight:"icon-xiangqing"
						}
					],
					placeholder:"卧室储物",
					aimUrl:"/shopping/newproduct/category",
					rightUrl:''
				}
			}
		},
		components:{
			ShopHeader
		}
	}
</script>
<style scoped lang="less">
	.cupboard-container{
		width: 100%;
		// height: 600 / 50rem;
		background-color: #e6e6e6;
		overflow: hidden;
		.top-zhanwei{
			width: 100%;
			height: 88 / 2 / 50rem;
		}
		.category-nav{
			width: 100%;
			background-color: #fff;
			height: 80 / 2 / 50rem;
			.nav-select{
				text-align: center;
				line-height:  80 / 2 / 50rem;
				display: inline-block;
				width: 33.3%;
				height: 100%;
				float: left;
				color: #333;
				font-size: 15 / 50rem;
				font-weight: 700;
			}
			.selected{
				color: #f55;
			}
		}
		.cupboard-wrap{
			width: 95%;
			margin: 20 / 2 / 50rem auto;
			background-color: red;
			.cupboard-item{
				width: 350 / 2 / 50rem;
				height: 440 / 2 / 50rem;
				margin-bottom: 30 / 2 / 50rem;
				float: left;
				background-color: #fff;
				border-radius: 10 / 2 / 50rem;
				img{
					width: 100%;
					height: 290 / 2 / 50rem;
				}
				.cupboard-item-title{
					color: #333;
					font-size: 15 / 50rem;
					font-weight: 700;
					margin-top: 10 / 2 / 50rem;
					margin-left: 20 / 2 / 50rem;
				}
				.descript-item{
					color: #666;
					margin-top: 2 / 2 /50rem;
					font-size: 7.5 / 50rem;
					margin-left: 20 / 2 / 50rem;
				}
				.cupboard-price{
					margin-left: 20 / 2 / 50rem;
					margin-top: 8 / 2 /50rem;
					color: #f55;
					font-size: 15 / 50rem;
					i{
						font-size: 20 / 50rem;
					}
				}
			}
			.cupboard-item:nth-child(odd){
				margin-right: 10 / 2 / 50rem;
			}
		}
	}
</style>